Overview
As a UX Designer I was responsible for managing the design system by ensuring all components met accessibility standards. Tooltips were already a part of our designs as a way to describe a components' functionality and/or interaction pattern and identify icons without labels, but this work made the tooltip apart of our design system library.
Problem
I noticed this issue while studying the user flow for submitting a sales forecast. Users had a difficult time understanding the forecast reset functions and choosing between "Reset Forecast" or "Reset Team Forecast". This confusion around which tooltip belongs to which button paired with tooltip readability issues was enough for me begin designing solutions.
Solution
To improve the readability, I increased the contrast by raising the opacity from 75% to 100% and added 8px padding on all sides. Using an accessibility tool allowed me to check that the tooltip would meet WCAG 2.0 standards. I collaborated with front-end engineers to include a dynamic carrot that could exist on any side of the tooltip based on the position of the element on the screen.
To improve the readability, I increased the contrast by raising the opacity from 75% to 100% and added 8px padding on all sides. Using an accessibility tool allowed me to check that the tooltip would meet WCAG 2.0 standards. I collaborated with front-end engineers to include a dynamic carrot that could exist on any side of the tooltip based on the position of the element on the screen.
